<style lang="less" scoped>
.history {
    padding: 0.15rem;
    .container {
        position: relative;
        height: 100%;
    }
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.15rem;
        .name {
            font-size: 0.14rem;
            color: #303030;
        }
        .icon {
            padding: 5px;
        }
        img {
            display: block;
            width: 14px;
        }
    }
    .tags {
        display: flex;
        flex-wrap: wrap;
        div {
            padding: 8px 15px;
            border-radius: 4px;
            background-color: #F2F2F2;
            color: #666666;
            font-size: 0.13rem;
            margin-right: 10px;
            margin-bottom: 10px;;
        }
    }
}
</style>
<template>
    <div class="component history">
        <div class="container">
            <div class="title">
                <div class="name">历史搜索</div>
                <div class="icon">
                    <img src="@/assets/icon/icon_del.png" />
                </div>
            </div>

            <div class="tags">
                <div v-for="(k,i) in tags" :key="i" @click="onSearch(k)">{{ k }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { HistorySearch } from "@/storage";
export default {
    data() {
        return {
            list: [],
        };
    },
    props: {
        tags: {
            type: Array,
            default: function(){
                return []
            }
        }
    },
    methods: {
        onSearch(keyword){
            HistorySearch(keyword);
            this.$emit("onSearch", keyword);
        },
        
        delAll(){
            HistorySearch(false);
        }
    },
    mounted() {
    }
};
</script>
